<template>
  <div class="commission-wrapper">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="普通商品佣金设置" name="first" />
        <el-tab-pane label="VIP卡佣金设置" name="second" v-if="isShowVipCardSetting" />
      </el-tabs>
    </div>
    <div class="middle">
      <div class="left">
        <Input ref="searchInpur" placeholder="请输入商品/货号" class="input-cls" @search="handleSearch" />
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100">
          <el-form-item label="分类筛选：">
            <el-cascader
              v-model="value"
              :options="classicList"
              :props="{label: 'kind_name', value: 'id', children: 'lower', expandTrigger: 'hover'}"
              clearable
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-button type="primary" @click.native="oneKeySetting">一键设置佣金</el-button>
        <el-button type="primary" @click.native="moreSetting">批量设置佣金</el-button>
      </div>
    </div>
    <div class="bottom">
      <table-list
        :is-vip="isVip"
        :list="list"
        :page-size="pageSize"
        :current-page="currentPage"
        @myBlur="handleMyBlur"
        @select="handleSelect"
        @selectAll="handleSelectAll"
      />
    </div>
    <Pagination
      class="pagination"
      :page-size="pageSize"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
    <Dialog ref="moreDialog" title="批量设置佣金" class="dialog" @closeDialog="moreConfim">
      <el-form v-if="!isVip" ref="form1" :model="normal" :rules="rules" label-width="80px">
        <el-form-item v-if="!isVip" label="一级佣金比例:" prop="commonGoodsFirstCommission">
          <div>
            <el-input v-model="normal.commonGoodsFirstCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item v-if="!isVip" label="二级佣金比例:" prop="commonGoodsSecondCommission">
          <div>
            <el-input v-model="normal.commonGoodsSecondCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
      </el-form>
      <el-form v-else ref="form1" :rules="rules" :model="vip" title="批量设置佣金" class="dialog" @closeDialog="moreConfim">
        <el-form-item label="一级佣金比例:" prop="vipGoodsFirstCommission">
          <div>
            <el-input v-model="vip.vipGoodsFirstCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item label="二级佣金比例:" prop="vipGoodsSecondCommission">
          <div>
            <el-input v-model="vip.vipGoodsSecondCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
    <Dialog ref="onekeyDialog" title="一键设置佣金" class="dialog" @closeDialog="oneKeyConfim">
      <el-form v-if="!isVip" ref="form2" :model="normal" :rules="rules" label-width="80px">
        <el-form-item label="一级佣金比例:" prop="commonGoodsFirstCommission">
          <div>
            <el-input v-model="normal.commonGoodsFirstCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item label="二级佣金比例:" prop="commonGoodsSecondCommission">
          <div>
            <el-input v-model="normal.commonGoodsSecondCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
      </el-form>
      <el-form v-else ref="form2" :model="vip" :rules="rules" label-width="80px">
        <el-form-item label="一级佣金比例:" prop="vipGoodsFirstCommission">
          <div>
            <el-input v-model="vip.vipGoodsFirstCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item label="二级佣金比例:" prop="vipGoodsSecondCommission">
          <div>
            <el-input v-model="vip.vipGoodsSecondCommission" size="mini" />
            <span>%</span>
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './components/commission/tableList'
import Dialog from '@/common/dialog'
import Pagination from '@/common/pagination'
import { getCommissionList, getGoodsClassicList, setNormalRevenue, setVipRevenue } from '@/api/commission'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    Dialog,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      formInline: {
        region: ''
      },
      normal: {
        commonGoodsFirstCommission: '',
        commonGoodsSecondCommission: ''
      },
      vip: {
        vipGoodsFirstCommission: '',
        vipGoodsSecondCommission: ''
      },
      rules: {
        commonGoodsFirstCommission: [
          { required: true, message: '请输入一级佣金比例', trigger: 'blur' }
        ],
        commonGoodsSecondCommission: [
          { required: true, message: '请输入二级佣金比例', trigger: 'blur' }
        ],
        vipGoodsFirstCommission: [
          { required: true, message: '请输入一级佣金比例', trigger: 'blur' }
        ],
        vipGoodsSecondCommission: [
          { required: true, message: '请输入二级佣金比例', trigger: 'blur' }
        ]
      },
      list: [],
      value: '',
      classicList: [],
      total: 0,
      currentPage: 1,
      pageSize: 15,
      id: '',
      query: '',
      isVip: false,
      selectArr: [],
      isShowVipCardSetting: JSON.parse(localStorage.getItem('isShowVipCardSetting'))
    }
  },
  created() {
    this._getCommissionList({ page: this.currentPage, is_vip: 0 })
    this._getGoodsClassicList()
  },
  methods: {
    handleSelect(arr) {
      const _arr = []
      arr.forEach((item, index) => {
        _arr.push(item.id)
      })
      this.selectArr = _arr
      console.log(this.selectArr)
    },
    handleSelectAll(arr) {
      const _arr = []
      arr.forEach((item, index) => {
        _arr.push(item.id)
      })
      this.selectArr = _arr
      console.log(this.selectArr)
    },
    oneKeyConfim() {
      this.currentPage = 1
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          if (!this.selectArr.length) {
            this.$message({
              message: '请先勾选后再操作',
              type: 'warning'
            })
            return
          }
          switch (this.activeName) {
            case 'first':
              this._setNormalRevenue(Object.assign({ myType: 1 }, this.normal, { id: this.selectArr }))
                .then(res => {
                  this._getCommissionList({ page: this.currentPage, is_vip: 0, keyword: this.query, second_cate_id: this.id })
                })
                .catch(err => {
                  console.log(err)
                })
              break
            case 'second':
              this._setVipRevenue(Object.assign({ myType: 1 }, this.vip, { id: this.selectArr }))
                .then(res => {
                  this._getCommissionList({ page: this.currentPage, is_vip: 1, keyword: this.query, second_cate_id: this.id })
                })
              break
          }
        } else {
          this.$refs.onekeyDialog.show()
          return false
        }
      })
    },
    oneKeySetting() {
      this.$refs.onekeyDialog.show()
    },
    moreSetting() {
      this.$refs.moreDialog.show()
    },
    moreConfim() {
      this.currentPage = 1
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          switch (this.activeName) {
            case 'first':
              this._setNormalRevenue(Object.assign({ myType: 2 }, this.normal))
                .then(res => {
                  this._getCommissionList({ page: this.currentPage, is_vip: 0, keyword: this.query, second_cate_id: this.id })
                })
                .catch(err => {
                  console.log(err)
                })
              break
            case 'second':
              this._setVipRevenue(Object.assign({ myType: 2 }, this.vip))
                .then(res => {
                  this._getCommissionList({ page: this.currentPage, is_vip: 1, keyword: this.query, second_cate_id: this.id })
                })
              break
          }
        } else {
          console.log('error submit!!')
          this.$refs.moreDialog.show()
          return false
        }
      })
    },
    handleClick(tab, event) {
      console.log(this.activeName)
      this.clearInput()
      this.getTabChangeList()
    },
    handleMyBlur(scope) {
      switch (this.activeName) {
        case 'first':
          this._setNormalRevenue({ id: [scope.row.id], myType: 1, commonGoodsFirstCommission: scope.row.commonGoodsFirstCommission, commonGoodsSecondCommission: scope.row.commonGoodsSecondCommission })
          break
        case 'second':
          this._setVipRevenue({ id: [scope.row.id], myType: 1, vipGoodsFirstCommission: scope.row.vipGoodsFirstCommission, vipGoodsSecondCommission: scope.row.vipGoodsSecondCommission })
          break
      }
    },
    getTabChangeList(query, second_cate_id) {
      this.currentPage = 1
      this.list = []
      switch (this.activeName) {
        case 'first':
          this.isVip = false
          this._getCommissionList({ page: this.currentPage, is_vip: 0, keyword: query, second_cate_id })
          break
        case 'second':
          this.isVip = true
          this._getCommissionList({ page: this.currentPage, is_vip: 1, keyword: query, second_cate_id })
          break
      }
    },
    handleSearch(query) {
      this.query = query
      this.value = ''
      this.getTabChangeList(this.query)
    },
    handleNextPage(page) {
      this.currentPage = page
    },
    handleChange(id) {
      this.currentPage = 1
      this.id = id[1]
      this.getTabChangeList(this.query, this.id)
    },
    clearInput() {
      this.$refs.searchInpur.clear()
    },
    _getCommissionList({ keyword, is_vip, page, second_cate_id }) {
      getCommissionList({ keyword, is_vip, page, second_cate_id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list.data
            this.total = res.data.list.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getGoodsClassicList() {
      getGoodsClassicList()
        .then((res) => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.classicList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setNormalRevenue({ id, myType, commonGoodsFirstCommission, commonGoodsSecondCommission }) {
      return setNormalRevenue({ id, myType, commonGoodsFirstCommission, commonGoodsSecondCommission })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success(res.message)
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _setVipRevenue({ id, myType, vipGoodsFirstCommission, vipGoodsSecondCommission }) {
      return setVipRevenue({ id, myType, vipGoodsFirstCommission, vipGoodsSecondCommission })
        .then(res => {
          console.log(res)
          this._success(res.message)
          return Promise.resolve(res)
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _success(message) {
      this.$message({
        type: 'success',
        message: message,
        showClose: true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.commission-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    padding: 10px 10px;
    box-sizing: border-box;
  }
  .middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .input-cls {
        margin-right: 23px;
      }
      .el-form-item {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .el-button {
        color: #fff;
        width: 87px;
      }
    }
  }
  .bottom {
    margin-top: 20px;
  }
}
.el-button {
  width: auto !important;
  padding: 0 10px;
}
.el-input {
  width: 200px !important;
}
.el-form-item /deep/ .el-form-item__label {
  white-space: nowrap;
  width: auto !important;
}
.dialog /deep/ .el-dialog {
  min-width: 380px;
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
</style>
